<template>
  <div>
    <div class="top">
        <div class="title">
            <span @click="back">&lt;</span>
            <p>添加地址</p>
        </div>
    </div>
    <div class="bottom">
        <van-form validate-first @failed="onFailed">
            <van-field
                required
                v-model="username"
                label="联系人"
                placeholder="请填写联系人姓名"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                required
                v-model="phone"
                name="pattern"
                label="手机号"
                placeholder="请输入联系人手机号"
                :rules="[{ required: true, pattern, message: '手机号格式错误' }]"
            />
            <!-- 地区 -->
            <van-field
                readonly
                clickable
                required
                name="area"
                :value="value"
                label="服务地址"
                placeholder="点击选择服务地址"
                @click="showArea = true"
            />
            <van-popup v-model="showArea" position="bottom">
            <van-area
                :area-list="areaList"
                @confirm="onConfirm"
                @cancel="showArea = false"
            />
            </van-popup>
            <van-field
                required
                v-model="num"
                label="门牌号"
                placeholder="请填写详细地址"
                :rules="[{ required: true, message: '请填写详细地址' }]"
            />
            <van-cell-group>
                <van-switch-cell v-model="checked" title="设为默认地址" />
            </van-cell-group>
        </van-form>
        <p>注意: 带<span>*</span>的为必填项。为了保证服务质量，请按照提示准确填写</p>
        <van-button type="primary" class="save" @click="save">保存</van-button>
    </div>
  </div>
</template>

<script>
import axios from '../../request'
import { areaList } from '@vant/area-data';
export default {
    data() {
        return {
            username:"",
            phone:"",
            pattern:/^\d{11}$/,
            areaList,
            value:"",
            num:"",
            address:"",
            showArea:false,
            checked: false,
        }
    },
    computed:{
    },

    methods: {
        onFailed(errorInfo) {
            console.log('failed', errorInfo);
        },
        onConfirm(values) {
            this.value = values
                .filter((item) => !!item)
                .map((item) => item.name)
                .join('/');
            this.showArea = false;
        },
        // 返回
        back(){
            this.$router.back()
        },
        // 保存
        save(){
            // let token=localStorage.getItem("token")
            if(this.username!="" && this.phone!="" && this.value!="" && this.num!=""){
                axios.post("/api/sys/address",
                {
                    contact:this.username,
                    cphone:this.phone,
                    detailAddress:this.value+this.num,
                    uid:localStorage.getItem("uid"),
                }).then(data=>{
                    console.log(data);
                })
                // this.$toast.success('保存成功');
                console.log(this.username,this.phone,this.value,this.num,this.checked)
            }else{
                this.$toast("请正确填写信息")
            }
            
        }
    },

}

</script>

<style lang="scss" scoped>
.top{
    height: 0.58rem;
    // background-color: aqua;
    box-sizing: border-box;
    padding: 0 0.28rem;
    border-bottom: 2px solid #E6E6E6;
    .title{
        width: 60%;
        height: 0.58rem;
        font-size: 0.18rem;
        line-height: 0.58rem;
        display: flex;
        justify-content: space-between;
        p{
            font-weight: 600;
            color: #333333;
        }
    }
}
.bottom{
    box-sizing: border-box;
    padding: 0 0.12rem;
    p{
        font-size: 0.12rem;
        color: #999999;
        line-height: 0.17rem;
        margin-top: 0.1rem;
        span{
            color:#C62142;
        }
    }
}
.van-cell{
    line-height:0.33rem;
    font-size: 0.14rem;
}
.save{
    font-size: 0.16rem;
    width: 2.4rem;
    height: 0.45rem;
    background: #00D2BB;
    border-radius: 0.23rem;
    margin-top: 1.61rem;
    margin-left: 0.55rem;
}

</style>